body {
	padding: 20px;
	margin: 0 auto;
	background-color: #E2E2E2;
	max-width: 1024px;
	color: #595B66;
	font-family: 'Microsoft Yahei', sans-serif;
}
h1,h2,h3,h4 {
	color: #797979;
    // border-bottom: solid 1px #797979;
    padding: 5px 0;
}
h1, h2 {
    border-bottom: solid 2px #797979;
}
p {
	font-size: 15px;
    background: #797979;
    padding: 10px;
    border-radius: 5px;
    color: white;
    line-height: 2;
}
a {
	color: #FFD200;
}
.box {
	background-color: white;
	margin: 0 0 55px;
	display: grid;

}
.box-tall {
	height: 800px;
}
.box-item {
	line-height: 200px;
	vertical-align: middle;
	margin: 5px;
	background-color: #ffd200;
	font-size: 100px;
	color: white;
	text-align: center;
}
.item-tall {
	height: 400px;
	line-height: 400px;
}


.box-1 {
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 210px;
}

.box-2 {
  grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr;
  grid-template-rows: 210px;
}

.box-3 {
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: 210px;
}

.box-4 {
  grid-template-columns:repeat(4,1fr);
  grid-template-rows: auto;
  grid-template-areas: "header header header header"
                       "main main . sidebar"
                       "footer footer footer footer"
}
.box-item-a{
  grid-area: header;
}
.box-item-b{
  grid-area: main;
}
.box-item-c{
  grid-area: sidebar;
}
.box-item-d{
  grid-area: footer;
}
.box-5 {
  grid-template-columns: repeat(3,200px);
  grid-template-rows: repeat(3,200px);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box-9 {
	justify-content: space-between;
}
.box-10 {
  grid-template-columns: repeat(3,200px);
  grid-template-rows: repeat(3,200px);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.box-10 .item{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3
}

